<!--
  * 用户表
  *
  * @Author:    jabari
  * @Date:      2023-06-12 14:10:13
  * @Copyright  51dev.cn
-->
<template>
    <a-modal
      :title="form.userId ? '编辑' : '添加'"
      width="500"
      :visible="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
    >
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" >
            <a-row>
                    <a-form-item label="用户ID"  name="userId">
                        <a-input-number style="width: 100%" v-model:value="form.userId" placeholder="用户ID" />
                    </a-form-item>
                    <a-form-item label="是否禁用0否 1是"  name="disabledFlag">
                        <BooleanSelect v-model:value="form.disabledFlag" style="width: 100%" />
                    </a-form-item>
                    <a-form-item label="是否删除0否 1是"  name="deletedFlag">
                        <BooleanSelect v-model:value="form.deletedFlag" style="width: 100%" />
                    </a-form-item>
                    <a-form-item label="更新时间"  name="updateTime">
                        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.updateTime" style="width: 100%" placeholder="更新时间" />
                    </a-form-item>
                    <a-form-item label="创建时间"  name="createTime">
                        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.createTime" style="width: 100%" placeholder="创建时间" />
                    </a-form-item>
            </a-row>

        </a-form>

        <template #footer>
            <a-space>
                <a-button @click="onClose">取消</a-button>
                <a-button type="primary" @click="onSubmit">保存</a-button>
            </a-space>
        </template>
    </a-modal>
</template>
<script setup>
    import { reactive, ref, nextTick } from 'vue';
    import _ from 'lodash';
    import { message } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { userApi } from '/@/api/system/user/user-api';
    import { smartSentry } from '/@/lib/smart-sentry';
    import BooleanSelect from '/@/components/framework/boolean-select/index.vue';

    // ------------------------ 事件 ------------------------

    const emits = defineEmits(['reloadList']);

    // ------------------------ 显示与隐藏 ------------------------
    // 是否显示
    const visibleFlag = ref(false);

    function show(rowData) {
        Object.assign(form, formDefault);
        if (rowData && !_.isEmpty(rowData)) {
            Object.assign(form, rowData);
        }
        visibleFlag.value = true;
        nextTick(() => {
            formRef.value.clearValidate();
        });
    }

    function onClose() {
        Object.assign(form, formDefault);
        visibleFlag.value = false;
    }

    // ------------------------ 表单 ------------------------

    // 组件ref
    const formRef = ref();

    const formDefault = {
        userId: undefined,
        userId: undefined, //用户ID
        disabledFlag: undefined, //是否禁用0否 1是
        deletedFlag: undefined, //是否删除0否 1是
        updateTime: undefined, //更新时间
        createTime: undefined, //创建时间
    };

    let form = reactive({ ...formDefault });

    const rules = {
        userId: [{ required: true, message: '用户ID 必填' }],
        disabledFlag: [{ required: true, message: '是否禁用0否 1是 必填' }],
        deletedFlag: [{ required: true, message: '是否删除0否 1是 必填' }],
        updateTime: [{ required: true, message: '更新时间 必填' }],
        createTime: [{ required: true, message: '创建时间 必填' }],
    };

    // 点击确定，验证表单
    async function onSubmit() {
        try {
            await formRef.value.validateFields();
            save();
        } catch (err) {
            message.error('参数验证错误，请仔细填写表单数据!');
        }
    }

    // 新建、编辑API
    async function save() {
        SmartLoading.show();
        try {
            if (form.userId) {
                await userApi.update(form);
            } else {
                await userApi.add(form);
            }
            message.success('操作成功');
            emits('reloadList');
            onClose();
        } catch (err) {
            smartSentry.captureError(err);
        } finally {
            SmartLoading.hide();
        }
    }

    defineExpose({
        show,
    });
</script>
